<script>
import outMain from "@/components/outMain.vue";
import elSelect from "@/components/public/elSelect.vue";
import edit from "@/components/public/edit.vue";
import { ElMessage, ElMessageBox } from "element-plus";
import { xySave, xyShow } from "@/http/api";
import Quill from "quill";
import "quill/dist/quill.snow.css"; // 引入样式文件
export default {
  components: { outMain, elSelect, edit },
  name: "",
  data() {
    return {
      quill: null,
      queryParams: {
        xy: "",
      },
      rules: {
        xy: [
          {
            message: "内容不能为空",
            required: true,
            trigger: "blur",
          },
        ],
      },
      maskTitle: "",
      queryData: {
        page: 1,
        per_page: 10,
      },
      total: 0,
    };
  },
  props: {},
  setup() {},
  methods: {
    async saveFn() {
      this.queryParams.xy = this.quill.container.firstChild.innerHTML;
      const valid = await this.$refs.ruleForm.validate();
      if (!valid) {
        return false;
      }
      const { data } = await xySave(this.queryParams);
      if (data.code == 1) {
        ElMessage({
          type: "success",
          message: "保存成功",
        });
      }
    },
    getData() {
      xyShow().then((res) => {
        if (res.data.code == 1) {
          this.queryParams.xy = res.data.data;
          this.quill.root.innerHTML = res.data.data;
        }
      });
    },
  },
  mounted() {
    setTimeout(() => {
      this.quill = new Quill(this.$refs.quillEditorRef, {
        theme: "snow",
        modules: {
          toolbar: {
            container: [
              ["bold", "italic", "underline", "strike"], // 加粗，斜体，下划线，删除线
              ["blockquote", "code-block"], // 块引用，代码块
              [{ header: 1 }, { header: 2 }], // 标题
              [{ list: "ordered" }, { list: "bullet" }], // 有序列表，无序列表
              [{ script: "sub" }, { script: "super" }], // 下标，上标
              [{ indent: "-1" }, { indent: "+1" }], // 缩进
              [{ direction: "rtl" }], // 文字方向
              [{ size: ["small", false, "large", "huge"] }], // 字体大小
              [{ header: [1, 2, 3, 4, 5, 6, false] }], // 标题
              [{ color: [] }, { background: [] }], // 字体颜色，背景颜色
              [{ font: [] }], // 字体
              [{ align: [] }], // 文字对齐
              ["clean"], // 清除格式
            ],
          },
        },
        placeholder: "请输入平台协议内容",
      });
      setTimeout(() => {
        this.getData();
      }, 1);
    }, 10);
  },
  created() {},
};
</script>
<template>
  <outMain>
    <div class="formCont">
      <div class="formStep">
        <div class="formHead">
          <div>平台协议</div>
        </div>
        <div class="formMain">
          <div class="stepCont">
            <div class="formDes">
              <div class="desTitle">
                <div>配置平台协议</div>
              </div>
              <el-form ref="ruleForm" :rules="rules" :model="queryParams">
                <el-form-item label-width="120" label="平台协议" prop="xy">
                  <div ref="quillEditorRef" class="quill-editor"></div>
                </el-form-item>
                <el-form-item label-width="120">
                  <btn value="保存设置" @ok="saveFn"></btn>
                </el-form-item>
              </el-form>
            </div>
          </div>
        </div>
      </div>
    </div>
  </outMain>
</template>
<style scoped lang="less">
.quill-editor {
  height: 250px;
  width: 100%;
}
</style>
<style>
.ql-snow {
  width: 100%;
}
</style>
